<style type="text/css">
  .layui-table-cell {
      height: auto !important;
  }
  .layui-form-radio {width: 90px;}
  
  </style>
<div class="layui-form" lay-filter="layuiadmin-form-backendadmin" style="padding: 20px 0 0 0;">
  <script type="text/html" template>
    <input type="hidden" name="id" value="{{ d.params.id || '' }}" class="layui-input">
  </script>

  <div class="layui-form-item no-cache ">
    <label class="layui-form-label">匹配条件</label>
    <div class="layui-input-block">
      <table id="cc-match" lay-filter="cc-match"></table>
      <script type="text/html" id="cc-match-bar">
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
      </script>

    </div>
    
  </div>

  <div class="layui-form-item">
    <label class="layui-form-label"></label>
    <div style="width: 160px;" class="layui-input-inline">
      <select name="match-item" lay-filter="match-item">
        <option value="">请选择匹配项</option>
        <option value="ip">IP地址</option>
        <option value="host">域名</option>
        <option value="req_uri">请求URI</option>
        <option value="uri">请求URI(不带参数)</option>
        <option value="req_method">请求方法</option>
        <option value="user_agent">浏览器UA</option>
        <option value="referer">请求来源</option>
        <option value="country_iso_code">国家代码</option>
      </select>
    </div>
    <div style="width: 130px;" class="layui-input-inline">
      <select name="match-op" lay-filter="match-op">
        <option value="">请选择操作符</option>
        <option value="=">等于</option>
        <option value="!=">不等于</option>
        <option value="contain">包含</option>
        <option value="!contain">不包含</option>
        <option value="prefix">前缀匹配</option>
        <option value="suffix">后缀匹配</option>
        <option value="regex">正则匹配</option>
      </select>
    </div>   

    <div class="layui-input-inline">
      <input name="match-value" placeholder="输入正则表达式" type="text" autocomplete="off" class="layui-input layui-hide">  
      <textarea name="match-value"  placeholder="一行一个匹配值" class="layui-textarea"></textarea>
    </div>   

    <div style="width: 50px;" class="layui-input-inline">
      <input type="button" id="add-match" value="添加" class="layui-btn layui-bg-blue layui-btn-sm">
    </div>

  </div>
  <div class="layui-form-item ">
    <label class="layui-form-label"></label>
    <div class="layui-form-mid layui-word-aux">注意：多个匹配条件的关系为且，即所有条件都满足时才执行下面的过滤</div>
  </div>

  <div class="layui-form-item">
    <label class="layui-form-label">执行过滤</label>
    <div class="layui-input-block">
      <input style="width: 90px;" type="radio" name="filter-type" lay-filter="filter-type"  value="bypass" title="放行">
      <input style="width: 90px;" type="radio" name="filter-type" lay-filter="filter-type"  value="block" title="拉黑">
      <input style="width: 90px;" type="radio" name="filter-type" lay-filter="filter-type"  value="req_rate" title="请求频率">
      <input style="width: 90px;" type="radio" name="filter-type" lay-filter="filter-type" value="browser_verify_auto" title="无感验证"> 
      <input style="width: 90px;" type="radio"  type="radio" name="filter-type" lay-filter="filter-type" value="delay_jump_filter" title="5秒盾"> 
      <input style="width: 90px;" type="radio"  type="radio" name="filter-type" lay-filter="filter-type" value="click_filter" title="点击验证"> 
      <input style="width: 90px;" type="radio"  type="radio" name="filter-type" lay-filter="filter-type" value="slide_filter" title="滑动验证"> 
      <input style="width: 90px;" type="radio"  type="radio" name="filter-type" lay-filter="filter-type" value="captcha_filter" title="验证码"> 
      <input style="width: 90px;" type="radio"  type="radio" name="filter-type" lay-filter="filter-type" value="rotate_filter" title="旋转图片"> 
      <input style="width: 90px;" type="radio"  type="radio" name="filter-type" lay-filter="filter-type" value="302_challenge" title="302跳转"> 
      <input  style="width: 90px;" type="radio" type="radio" name="filter-type" lay-filter="filter-type" value="url_auth" title="URL鉴权"> 
    </div>
  </div>

  <div class="layui-form-item within-second layui-hide">
    <label class="layui-form-label"></label>
    <div class="layui-input-inline">
      <input value="60" type="text" name="within_second"    autocomplete="off" class="layui-input">  
    </div>
    <div class="layui-form-mid layui-word-aux">秒内</div>
  </div>

  <div class="layui-form-item max-req layui-hide">
  <label class="layui-form-label"></label>
    <div class="layui-input-inline">
      <input value="5" type="text" name="max_req"  autocomplete="off" class="layui-input">  
    </div>
    <div class="max-req-tip layui-form-mid layui-word-aux">最大失败次数 (0表示直接拉黑)</div>
  </div>

  <div class="layui-form-item max_req_per_uri layui-hide">
    <label class="layui-form-label"></label>
    <div class="layui-input-inline">
      <input type="text" name="max_req_per_uri"    autocomplete="off" class="layui-input">  
    </div>
    <div class="layui-form-mid layui-word-aux">单URL最大次数 (0表示直接拉黑)</div>
  </div>

  <div class="layui-form-item url_auth layui-hide">
    <label class="layui-form-label"></label>
    <div class="layui-input-inline">
      <select name="url_auth_mode" lay-filter="url_auth_mode">
        <option value="TypeA">TypeA</option>
        <option value="TypeB">TypeB</option>
      </select>
    </div>
    <div class="layui-form-mid layui-word-aux">鉴权方式</div>
  </div>


  <div class="layui-form-item url_auth layui-hide">
    <label class="layui-form-label"></label>
    <div class="layui-input-inline">
      <input type="text" name="url_auth_key"    autocomplete="off" class="layui-input">  
    </div>
    <div class="layui-form-mid layui-word-aux">密钥(16-32位)</div>
  </div>

  <div class="layui-form-item url_auth layui-hide">
    <label class="layui-form-label"></label>
    <div class="layui-input-inline">
      <input type="text" name="url_auth_sign_name" value="sign"  autocomplete="off" class="layui-input">  
    </div>
    <div class="layui-form-mid layui-word-aux">签名参数名</div>
  </div>

  <div class="layui-form-item url_auth_a layui-hide">
    <label class="layui-form-label"></label>
    <div class="layui-input-inline">
      <input type="text" name="url_auth_time_name" value="t"  autocomplete="off" class="layui-input">  
    </div>
    <div class="layui-form-mid layui-word-aux">时间戳参数名</div>
  </div>

   <div class="layui-form-item  url_auth layui-hide">
     <label class="layui-form-label"></label>
    <div class="layui-input-inline">
      <input type="text" name="url_auth_time_diff" value="180"  autocomplete="off" class="layui-input">  
    </div>
    <div class="layui-form-mid layui-word-aux">最大时间相差(秒)</div>

  </div>

  <div class="layui-form-item  url_auth layui-hide">
    <label class="layui-form-label"></label>
    <div class="layui-input-inline">
      <input type="text" name="url_auth_sign_use_times" value="0"  autocomplete="off" class="layui-input">  
    </div>
    <div class="layui-form-mid layui-word-aux">签名使用次数（0表示不限制）</div>

  </div>

  <div class="layui-form-item">
    <label class="layui-form-label"></label>
    <div class="layui-input-inline">
      <input type="button" lay-submit lay-filter="LAY-site-site-edit-custom-rule-add-submit" value="确认" class="layui-btn">
    </div>
  </div>
</div>
<script type="text/html" template lay-done="layui.data.sendParams(d.params)">
</script>

<script type="text/javascript">
var form = layui.form
var $ = layui.$
var table = layui.table
var admin = layui.admin
form.render()
window.match_rules = []
layui.data.sendParams = function(params){
  // 获取match_rules
  var matcher = params.matcher
  if (matcher) {
    for (item in matcher) {
      window.match_rules.push({"item":item,"op":matcher[item]['operator'],"value":matcher[item]['value']})
    }
  }

  // 获取filter
  var filter = params.filter
  if (filter) {
    var type = filter.type
    var max_challenge = filter.max_challenge
    var max_per_uri = filter.max_per_uri
    var within_second = filter.within_second
    var extra = filter.extra
    $("input[name='within_second']").val(within_second)
    $("input[name='max_req']").val(max_challenge)

    $("input[name='filter-type'][value='"+type+"']").prop("checked",true)
    

    if (type == "req_rate") {
      if (within_second == "11" && max_challenge== "11111" && max_per_uri=="11111") {
        $("input[name='filter-type'][value='bypass']").prop("checked",true)
        $(".within-second").addClass("layui-hide")
        $(".max-req").addClass("layui-hide")
        $(".max_req_per_uri").addClass("layui-hide")        

      } else if (within_second == "11" && max_challenge== "0" && max_per_uri=="0") {
        $("input[name='filter-type'][value='block']").prop("checked",true)
        $(".within-second").addClass("layui-hide")
        $(".max-req").addClass("layui-hide")
        $(".max_req_per_uri").addClass("layui-hide")        
      } else {
        $(".within-second").removeClass("layui-hide")
        $(".max-req").removeClass("layui-hide")
        $(".max_req_per_uri").removeClass("layui-hide")

        $("input[name='max_req_per_uri']").val(max_per_uri)
      }
      
    } else if (type == "url_auth") {
      $(".url_auth").removeClass("layui-hide")

      var mode = extra['mode']
      $("select[name='url_auth_mode']").val(mode)

      if (mode == "TypeA") {
        $(".url_auth_a").removeClass("layui-hide")
      } else {
        $(".url_auth_a").addClass("layui-hide")
      }

      // 填充
      $("input[name='url_auth_key']").val(extra['key'])
      $("input[name='url_auth_sign_name']").val(extra['sign_name'])
      $("input[name='url_auth_time_diff']").val(extra['time_diff'])
      $("input[name='url_auth_sign_use_times']").val(extra['sign_use_times'])
      $("input[name='url_auth_time_name']").val(extra['time_name'])

    }

    form.render()
  } else {
    $("input[name='url_auth_key']").val(admin.rndStr(16))
  }

  
  table.render({
      elem: '#cc-match'
      ,page: false //开启分页
      ,cols: [[ //表头
        {field: 'item', title: '匹配项',templet:function(d) {
          return window.match_item_map[d.item]
        }}
        ,{field: 'op', title: '操作符', templet: function(d) {
          return window.match_op_map[d.op]
        }}
        ,{field: 'value', title: '匹配值',templet:function(d) {
          return d.value.split("\n").join("<br>")
        }} 
        ,{fixed: 'right', title:'操作', toolbar: '#cc-match-bar', width:70}
      ]]
      ,data: window.match_rules
      ,size: "sm"
      ,text: {none: '请添加条件' }
      
    });

    table.on('tool(cc-match)', function(obj){
          var edit_index = $(obj.tr).data("index");
          var table_data = obj.data
          if(obj.event === 'del'){
            window.match_rules.splice(edit_index,1)

            table.reload("cc-match",{
              data: window.match_rules
              ,done: function() {
                $("select[name='match-item']").append('<option value="'+table_data.item+'">'+window.match_item_map[table_data.item]+'</option>')
                form.render()      
              }
            })
          }
    });  

    $("#add-match").click(function () {
      var match_item = $("select[name='match-item']").val()
      var match_op = $("select[name='match-op']").val()
      var match_value = ""
      if (match_op == "regex") {
        match_value = $("input[name='match-value']").val()
      } else {
        match_value = $("textarea[name='match-value']").val()
      }
      if (match_item == "") {
        layer.alert("请选择匹配项")
        return
      }

      if (match_op == "") {
        layer.alert("请选择操作符")
        return
      }

      if (match_value == "") {
        layer.alert("请输入匹配值")
        return
      }

      window.match_rules.push({"item":match_item,"op":match_op,"value":match_value})
      table.reload("cc-match",{
        data: window.match_rules
        ,done: function() {
          $("select[name='match-item']").find("option[value='"+match_item+"']").remove()
          $("select[name='match-item']").val("")
          $("select[name='match-op']").val("")
          $("textarea[name='match-value']").val("")
          $("input[name='match-value']").val("")
          $("input[name='match-value']").addClass("layui-hide")
          $("textarea[name='match-value']").removeClass("layui-hide")        
          form.render()      
        }
      })

    })

    form.on('select(match-op)', function(data){
      console.log()
      if (data.value == "regex") {
        $("input[name='match-value']").removeClass("layui-hide")
        $("textarea[name='match-value']").addClass("layui-hide")
      } else {
        $("input[name='match-value']").addClass("layui-hide")
        $("textarea[name='match-value']").removeClass("layui-hide")
      }
      form.render()
    })
    form.on('radio(filter-type)', function(data){
      $(".max-req-tip").text("最大失败次数（0表示直接拉黑）")
      if (data.value == "req_rate") {
        $(".max_req_per_uri").removeClass("layui-hide")
        $(".url_auth").addClass("layui-hide")
        $(".max-req-tip").text("最大请求次数 (0表示直接拉黑)")
        $(".url_auth_a").addClass("layui-hide")

        $(".within-second").removeClass("layui-hide")
        $(".max-req").removeClass("layui-hide")

        $("input[name='max_req']").val("")
        $("input[name='within_second']").val("10")

      } else if (data.value == "bypass") {
        $(".max_req_per_uri").addClass("layui-hide")
        $(".url_auth").addClass("layui-hide")
        $(".url_auth_a").addClass("layui-hide")

        $(".within-second").addClass("layui-hide")
        $(".max-req").addClass("layui-hide")

        $("input[name='max_req']").val("11111")
        $("input[name='max_req_per_uri']").val("11111")
        $("input[name='within_second']").val("11")

      } else if (data.value == "block") {
        $(".max_req_per_uri").addClass("layui-hide")
        $(".url_auth").addClass("layui-hide")
        $(".url_auth_a").addClass("layui-hide")

        $(".within-second").addClass("layui-hide")
        $(".max-req").addClass("layui-hide")

        $("input[name='max_req']").val("0")
        $("input[name='max_req_per_uri']").val("0")
        $("input[name='within_second']").val("11")

      }  else if (data.value == "url_auth") {
        $(".max_req_per_uri").addClass("layui-hide")
        $(".url_auth").removeClass("layui-hide")

        var mode = $("select[name='url_auth_mode']").val()
        if (mode == "TypeA") {
          $(".url_auth_a").removeClass("layui-hide")
        } else {
          $(".url_auth_a").addClass("layui-hide")
        }

        $(".within-second").addClass("layui-hide")
        $(".max-req").addClass("layui-hide")
        $("input[name='max_req']").val("5")
        $("input[name='within_second']").val("60")

      } else {
        $(".max_req_per_uri").addClass("layui-hide")
        $(".url_auth").addClass("layui-hide")
        $(".url_auth_a").addClass("layui-hide")

        $(".within-second").addClass("layui-hide")
        $(".max-req").addClass("layui-hide")

        $("input[name='max_req']").val("5")
        $("input[name='within_second']").val("60")

      }

    }); 

    form.on('select(url_auth_mode)', function(data){
      var value = data.value
      if (value == "TypeA") {
        $(".url_auth_a").removeClass("layui-hide")
      } else {
        $(".url_auth_a").addClass("layui-hide")
      }
    });  
}
</script>